<template>
    <Panel   shadow :padding="10">
      <el-table
        :data="teacher"
        style="width: 100%">
        <el-table-column
          label="姓名"
          prop="name"          >
        </el-table-column>
        <el-table-column
          label="简介"
          prop="brief"          >
        </el-table-column>
        <el-table-column
          label="头像"
          prop="image"          >
        </el-table-column>
        <el-table-column
          label="介绍"
          prop="introduce"          >
        </el-table-column>        
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="编辑老师" :visible.sync="editing" :close-on-click-modal = "false">
        <el-form :inline="true"  ref="form" :model="editteacher">
          <el-form-item label="姓名">
            <el-input  v-model="editteacher.name"></el-input>
          </el-form-item>
          <el-form-item label="简介">
            <el-input type="textarea" v-model="editteacher.brief"></el-input>
          </el-form-item>
          <el-form-item label="头像">
            <el-input v-model="editteacher.image"></el-input>
          </el-form-item>
          <el-form-item label="介绍">
            <el-input type="textarea" v-model="editteacher.introduce"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button v-if="!adding" type="primary" @click="onSubmit">更新</el-button>
            <el-button v-if="adding" type="primary" @click="onSubmit">新增</el-button>
          </el-form-item>
        </el-form>
      </el-dialog >
      <el-button style="margin-top:20px" type="primary" @click="addTeacher">
        新增
      </el-button>
    </Panel>
  </template>
  <script>
    import api from '../../api.js'

    export default {
      name: 'teacher',
      data () {
        return {
          teacher: [],
          editteacher: {},
          editing: false,
          adding: false
        }
      },
      mounted () {
        this.getTeacherList()
      },
      methods: {
        getTeacherList () {
          api['getTeacher']().then((res) => {
            this.teacher = res.data.data
          }).catch()
        },
        handleEdit (index, row) {
          this.editing = true
          this.editteacher['id'] = this.teacher[index].id
          this.editteacher['name'] = this.teacher[index].name
          this.editteacher['brief'] = this.teacher[index].brief
          this.editteacher['image'] = this.teacher[index].image
          this.editteacher['introduce'] = this.teacher[index].introduce
          this.editteacher = JSON.parse(JSON.stringify(this.editteacher))
          console.log(index, row.title)
        },
        onSubmit () {
          let params = this.editteacher
          console.log('par', params)
          if (!this.adding) {
            api['editTeacher'](params).then((res) => {
              this.editing = false
              this.adding = false
              this.getTeacherList()
            }).catch()
          } else {
            api['addTeacher'](params).then((res) => {
              this.editing = false
              this.adding = false
              this.getTeacherList()
            }).catch()
          }
        },
        addTeacher () {
          this.editing = true
          this.adding = true
          this.editteacher = {}
        }
      }
    }
  </script>
  
  <style scoped lang="less">
  </style>
  